import { LineLayer, Mapbox, Marker, PointLayer, PolygonLayer, Scene } from "@antv/l7";
import "./index.scss";
import bg1 from "./assets/4367.png";
import bg2 from "./assets/4378.png";

export default defineComponent({
	name: "Map",
	setup() {
		const drawBaseMap = async (scene: Scene) => {
			const data = await fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json");

			const JsonData = JSON.parse(await data.text());
			const layer = new PolygonLayer({
				autoFit: true
			}).source(JsonData);
			layer
				.color("name", ["rgb(239,243,255)", "rgb(189,215,231)", "rgb(107,174,214)", "rgb(49,130,189)", "rgb(8,81,156)"])
				.shape("fill")
				.style({
					opacity: 1
				});

			const layer2 = new LineLayer({
				autoFit: true
			})
				.source(JsonData)
				.color("#163247")
				.style({
					opacity: 1,
					width: 0.5
				});

			layer;
			// scene.addLayer(layer);
			scene.addLayer(layer2);
		};
		// const drawFence = async (scene: Scene) => {
		// 	const data = await fetch("/map/china-margin.json");
		//
		// 	const JsonData = JSON.parse(await data.text());
		// 	const layer = new LineLayer({}).source(JsonData).size(40).shape("wall").style({
		// 		opacity: 1,
		// 		sourceColor: "#0DCCFF",
		// 		targetColor: "rbga(255,255,255, 0)"
		// 	});
		// 	scene.addLayer(layer);
		// 	return scene;
		// };
		const drawIcon = async (scene: Scene) => {
			await scene.addImage("00", "/images/map/4384.png");
			await scene.addImage("01", "/images/map/4348.png");
			await scene.addImage("02", "/images/map/4363.png");

			const data = await fetch("/map/data.json");
			const JsonData = JSON.parse(await data.text());
			const layer = new PointLayer()
				.source(JsonData, {
					parser: {
						type: "json",
						coordinates: "center"
					}
				})
				.shape("type")
				.size(50)
				.animate(true)
				.style({ offsets: [5, 40] });
			scene.addLayer(layer);
		};

		const drawLabel = async (scene: Scene) => {
			const data = await fetch("/map/data.json");
			const JsonData = JSON.parse(await data.text()) as IJsonData[];

			function getBgPic(v) {
				switch (v) {
					case "00":
						return bg1;
					case "01":
						return bg2;
					default:
						return bg1;
				}
			}

			interface IJsonData {
				name: string;
				center: number[];
				type: string;
			}

			for (let i = 0; i < JsonData.length; i++) {
				const el = document.createElement("div");
				el.className = "labelClass text-white text-xs h-[30px] px-3 text-center leading-[30px]";
				el.textContent = JsonData[i].name;
				el.style.background = `url(${getBgPic(JsonData[i].type)}) no-repeat`;
				el.style.backgroundSize = "100% 100%";
				const marker = new Marker({
					element: el,
					offsets: [-50, 50]
				}).setLnglat({ lng: JsonData[i].center[0], lat: JsonData[i].center[1] });
				scene.addMarker(marker);
			}
		};

		const drawWall = async (scene: Scene) => {
			const JsonData = await (await fetch("/map/china-margin.json")).json();
			const layer = new LineLayer({
				autoFit: true
			})
				.shape("line")
				.source(JsonData)
				.size(1.2)
				.color("#59C9D7")
				.style({
					// blur: [1, 1, 1]
				});
			// .animate(true);
			scene.addLayer(layer);
		};

		const mapDom = ref(null);
		onMounted(() => {
			const scene = new Scene({
				id: mapDom.value as HTMLDivElement,
				map: new Mapbox({
					style: "blank",
					center: [107, 35],
					zoom: 1,
					interactive: false
				})
			});
			scene.on("loaded", () =>
				drawBaseMap(scene)
					.then(() => drawIcon(scene))
					.then(() => drawLabel(scene))
					.then(() => drawWall(scene))
					.then(() => scene.render())
			);
		});
		return () => (
			<div class="w-full h-full">
				<div
					style="height:844.961px; width:952.012px; min-height: 500px; justify-content: center;position: relative"
					ref={mapDom}
				/>
			</div>
		);
	}
});
